import * as echarts from 'echarts';
import AutoChart from '../AutoChart';

interface ColumnChartProps {
  dataX?: string[];
  dataY?: number[];
}

const ColumnCharts: React.FC<ColumnChartProps> = (prop) => {
  const options: echarts.EChartsOption = {
    // 标题
    title: {
      text: '青春之行',
      show: true,
      subtext: '青春之行',
    },

    // 提示框组件
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    // 图例组件
    legend: {
      data: ['超开心'],
      show: true,
      name: '111',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    // x轴
    xAxis: {
      name: 'asfasfga',
      type: 'category',
      data: prop.dataX || ['青岛', '青岛', '青岛', '青岛', '青岛', '青岛', '青岛'],
      nameRotate: 45,
      axisLabel: {
        rotate: 45,
      },
    },
    // y轴
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: prop.dataY || [0, 1, 2, 3, 4, 5, 6],
        // type: 'line', // 折线图
        type: 'bar', // 柱状图
        name: '超开心',
      },
    ],
  };

  return <AutoChart option={options}></AutoChart>;
};
export default ColumnCharts;
